<script setup>
import { onMounted, reactive, ref } from 'vue'
import { artGetChannelsService, artDelChannelService } from '@/api/article'
import PageContainer from '@/components/PageContainer/index.vue'
import appTable from '@/components/i-table/t-able.vue'
import ChannelEdit from './components/ChannelEdit.vue'
import { ElMessageBox, ElMessage } from 'element-plus'
const dialog = ref()
// 新增
const onAddChannel = () => {
  dialog.value.open({})
}
// 编辑
const onEditChannel = (row) => {
  dialog.value.open(row)
}
// 成功回调
const onSuccess = () => {
  getChannelList()
}
// 表格
let tableContent = reactive({
  total: 0,
  list: [],
  otherHeight: 150,
  columns: [
    {
      prop: 'cate_name',
      label: '分类名称',
      align: 'center',
      el: {
        'show-overflow-tooltip': true
      }
    },
    {
      prop: 'cate_alias',
      label: '分类别名',
      align: 'center',
      el: {
        'show-overflow-tooltip': true
      }
    }
  ], // 需要展示的列
  options: {
    stripe: true, // 是否为斑马纹 table
    loading: false, // 是否添加表格loading加载动画
    highlightCurrentRow: true, // 是否支持当前行高亮显示
    mutiSelect: false, // 是否支持列表项选中功能
    border: true, //是否显示边框
    numbers: true //是否显示序号
  }, // table 的参数
  pagination: {
    pagenum: 1,
    pagesize: 10
  }, // 分页参数
  operates: {
    width: 200,
    list: [
      {
        label: '编辑',
        type: 'primary',
        plain: true,
        icon: 'Edit',
        method: (index, row) => {
          console.log('编辑')
          onEditChannel(row)
        }
      },
      {
        label: '删除',
        type: 'danger',
        icon: 'Delete',
        plain: true,
        method: (index, row) => {
          console.log('删除')
          onDelChannel(row)
        }
      }
    ]
  }
})
// 切换每页显示的数量
const handleSizeChange = (pagination) => {
  console.log('pagination', pagination)
}
// 切换页码
const handleIndexChange = (pagination) => {
  console.log('pagination', pagination)
}
//删除
const onDelChannel = async (row) => {
  await ElMessageBox.confirm('你确认删除该分类信息吗？', '温馨提示', {
    type: 'warning',
    confirmButtonText: '确认',
    cancelButtonText: '取消'
  })
  await artDelChannelService(row.id)
  ElMessage({ type: 'success', message: '删除成功' })
  getChannelList()
}
// 初始化
onMounted(() => {
  getChannelList()
})

const getChannelList = async () => {
  tableContent.options.loading = true
  const res = await artGetChannelsService()
  tableContent.list = res.data.data
  tableContent.options.loading = false
}
</script>
<template>
  <page-container title="文章分类">
    <template #extra>
      <el-button type="primary" @click="onAddChannel"> 添加分类 </el-button>
    </template>

    <app-table
      :list="tableContent.list"
      :total="tableContent.total"
      :otherHeight="tableContent.otherHeight"
      :options="tableContent.options"
      :pagination="tableContent.pagination"
      :columns="tableContent.columns"
      :operates="tableContent.operates"
      @handleSizeChange="handleSizeChange"
      @handleIndexChange="handleIndexChange"
    >
    </app-table>
  </page-container>
  <channel-edit ref="dialog" @success="onSuccess"></channel-edit>
</template>
